<template>
    <view class="container">
        <u-sticky :zIndex="1" bgColor="#FFFFFF">
            <u-tabs
                    :list="tabsItem"
                    lineColor="#5D5D5D"
                    lineWidth="69rpx"
                    lineHeight="6rpx"
                    activeStyle="font-size: 26rpx;color: #171717;line-height: 37rpx;"
                    inactiveStyle="font-size: 26rpx;color: #888888;line-height: 37rpx;"
                    itemStyle="flex: 1;height: 100rpx;border-bottom: 1px solid #EEEEEE;"
                    :current="tabsIndex"
                    @change="handleChange"
                    :scrollable="false"
            ></u-tabs>
        </u-sticky>
        <view class="point-box">
            <block v-if="userPointList.length > 0">
                <view class="point-box-item" v-for="(item, k) in userPointList" :key="k">
                    <view class="point-info">
                        <view class="point-info-label">{{ item.description }}</view>
                        <view class="point-info-value" v-if="item.point > 0">+{{ item.point }}</view>
                        <view class="point-info-value" style="color: #000000" v-else>{{ item.point }}</view>
                    </view>
                    <view class="point-date">{{ item.createAt|dateFormat }}</view>
                </view>
            </block>
            <u-empty
                mode="data"
                width="400rpx"
                height="400rpx"
                icon="https://img.ionepin.com/dcfe6ae6d90104cbc50c50dd6010c1f8eabee5a3.png"
                class="empty"
                textSize="38rpx"
                v-else
            >
            </u-empty>
            <u-loadmore
                height="50rpx"
                :status="loadStatus"
                v-if="total > 8"
                marginTop="20rpx"
                marginBottom="20rpx"
                fontSize="32rpx"
                iconSize="34rpx"
                line
            />
        </view>
    </view>
</template>

<script>
    import { getUserPointLog } from "@/config/api"
    import { parseTime } from "@/untils"
    export default {
        name: "index",
        data() {
            return {
                tabsItem: [
                    {
                        name: "收入",
                        type: "income",
                    },
                    {
                        name: "支出",
                        type: "pay",
                    },
                ],
                tabsIndex: 0,
                listQuery: {
                    page: 1,
                    list_rows: 15,
                    type: "income"
                },
                userPointList: [],
                total: 0
            }
        },
        filters: {
          dateFormat(val) {
              return parseTime(val, "{y}.{m}.{d} {h}:{i}:{s}")
          }
        },
        onLoad() {
            this.getData()
        },
        computed: {
            loadStatus() {
                if (this.total > this.userPointList.length) {
                    return "loading";
                } else {
                    return "nomore";
                }
            }
        },
        onReachBottom() {
            if (this.total > this.userPointList.length) {
                this.listQuery.page += 1;
                this.getData(true);
            }
        },
        methods: {
            handleChange(item) {
                this.listQuery.type = item.type
                this.listQuery.page = 1
                this.getData()
            },
            async getData(more = false) {
                if (!more) {
                    uni.showLoading({
                        title: "加载中..."
                    })
                }
                const res = await getUserPointLog(this.listQuery)
                if (more) {
                    this.userPointList = [...this.userPointList,...res.items]
                } else {
                    this.userPointList = res.items
                }
                this.total = res.total
                if (!more) {
                    uni.hideLoading()
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        .point-box {
            padding: 10rpx 26rpx;
            .point-box-item {
                padding-top: 50rpx;
                .point-info {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 10rpx;
                    .point-info-label {
                        font-size: 28rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #000000;
                    }
                    .point-info-value {
                        font-size: 30rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #356CE7;
                    }
                }
                .point-date {
                    font-size: 24rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #888888;
                }
            }
            .empty {
                padding: 100rpx 0;
            }
        }
    }
</style>
